<template>
  <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width="700px" v-loading="loading">
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-tabs :tab-position="tabPosition" style="height: 600px;">
    <el-tab-pane label="基本信息">
      <el-form :model="members"
      ref="resourceForm" label-width="80px" label-position="right" size="small">
      <el-form-item label="档案号">
        <el-col :span="16"><el-input disabled :readonly="true" v-model="members.fileNumber"></el-input></el-col>
      </el-form-item>

      <el-row :span=18>
          <el-col :span="9">
            <el-form-item label="*姓名">
              <el-col :span="16"><el-input :maxlength="32" v-model="members.name"></el-input></el-col>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="*密码">
              <el-col :span="16"><el-input ref="password" :maxlength="32" v-model="members.password" autofocus></el-input></el-col>
            </el-form-item>
          </el-col>

      </el-row>

      <el-form-item label="身份证">
        <el-col :span="16"><el-input  :maxlength="64" v-model="members.idCard"></el-input></el-col>
      </el-form-item>
      <el-form-item label="年龄">
        <el-col :span="16"><el-input :maxlength="32" v-model="members.age"></el-input></el-col>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-col :span="16"><el-input :maxlength="32" v-model="members.email"></el-input></el-col>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="members.sex">
          <el-radio label="0">男</el-radio>
          <el-radio label="1">女</el-radio>
        </el-radio-group>
        <!-- <el-col :span="16"><el-input :maxlength="32" v-model="members.sex"></el-input></el-col> -->
      </el-form-item>

      <el-form-item label="生日">
        <el-col :span="16"><el-input type="date"  v-model="members.birthday"></el-input></el-col>
      </el-form-item>

      <el-row :span=18>
          <el-col :span="9">
            <el-form-item label="文化程度">
              <el-col :span="16"><el-input :maxlength="32" v-model="members.tMemberInfo.educationDegree"></el-input></el-col>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="*婚姻状态">
              <el-col :span="16">
                <template>
              <el-select v-model="members.tMemberInfo.maritalStatus" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled">
                </el-option>
              </el-select>
            </template>
              </el-col>
            </el-form-item>
          </el-col>

      </el-row>

      <el-row :span=18>
          <el-col :span="9">
            <el-form-item label="职业">
              <el-col :span="16"><el-input :maxlength="32" v-model="members.tMemberInfo.job"></el-input></el-col>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="籍贯">
              <el-col :span="16"><el-input :maxlength="32" v-model="members.tMemberInfo.nativePlace" autofocus></el-input></el-col>
            </el-form-item>
          </el-col>

      </el-row>

       <el-form-item label="备注">
                <el-input type="textarea" style="width:500px"  rows="5" v-model="members.remark"></el-input>
       </el-form-item>
    </el-form>
    </el-tab-pane>
    <el-tab-pane label="动态信息">
      <el-form :model="members.tMemberDynamicinfo"
      ref="resourceForm" label-width="100px" label-position="right" size="small">
      <el-row :span="24">
        <el-col :span="8">
           <el-form-item label="身高" prop="height">
        <el-col><el-input v-model="members.tMemberDynamicinfo.height"></el-input></el-col>
      </el-form-item>

        </el-col>
        <el-col :span="8">
           <el-form-item label="体重" prop="weight">
            <el-col><el-input v-model="members.tMemberDynamicinfo.weight"></el-input></el-col>
           </el-form-item>
        </el-col>

        <el-col :span="8">
           <el-form-item label="收缩压" prop="sbp">
            <el-col ><el-input v-model="members.tMemberDynamicinfo.sbp"></el-input></el-col>
           </el-form-item>
        </el-col>
      </el-row>

        <el-row :span="24">
          <el-col :span="8">
           <el-form-item label="呼吸" prop="breth">
            <el-col><el-input v-model="members.tMemberDynamicinfo.breth"></el-input></el-col>
           </el-form-item>
        </el-col>

        <el-col :span="8">
           <el-form-item label="体温" prop="thermometer">
            <el-col><el-input v-model="members.tMemberDynamicinfo.thermometer"></el-input></el-col>
           </el-form-item>
        </el-col>

        <el-col :span="8">
           <el-form-item label="舒张压" prop="dbp">
              <el-col><el-input v-model="members.tMemberDynamicinfo.dbp"></el-input></el-col>
           </el-form-item>
        </el-col>
      </el-row>

      <el-row :span="24">
          <el-col :span="12">
              <el-form-item label="腰围" prop="waistline">
                <el-col><el-input v-model="members.tMemberDynamicinfo.waistline"></el-input></el-col>
              </el-form-item>
          </el-col>

          <el-col :span="12">
              <el-form-item label="臀围" prop="hipline">
                <el-col><el-input v-model="members.tMemberDynamicinfo.hipline"></el-input></el-col>
              </el-form-item>
          </el-col>
      </el-row>

      </el-form>

    </el-tab-pane>
    <el-tab-pane label="病史">
      <el-form :model="members"
      ref="resourceForm" label-width="100px" label-position="right" size="small">

      <el-form-item label="既往史">
        <el-col :span="16"><el-input v-model="members.tMemberMedicalhistory.previousHistory"></el-input></el-col>
      </el-form-item>

      <el-form-item label="家族史">
        <el-col :span="16"><el-input v-model="members.tMemberMedicalhistory.familyHistory"></el-input></el-col>
      </el-form-item>

      <el-form-item label="过敏史">
        <el-col :span="16"><el-input v-model="members.tMemberMedicalhistory.allergicHistory"></el-input></el-col>
      </el-form-item>

      <el-form-item label="病史">
        <el-col :span="16"><el-input v-model="members.tMemberMedicalhistory.medicalHistory"></el-input></el-col>
      </el-form-item>

      <el-form-item label="慢性病">
        <el-col :span="16"><el-input v-model="members.tMemberMedicalhistory.chronicDisease"></el-input></el-col>
      </el-form-item>

      </el-form>
    </el-tab-pane>
  </el-tabs>



    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="update()">确 定</el-button>
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {addMember , updatemember} from "@/api/luowuwen/member"


export default {
  name: 'memberinfo',
  data() {

    return {
      tabPosition:"top",
       loading: false,

      members: {
        id:0,
        fileNumber: '',
        name: '',
        regTime:"",
        password: '',
        birthday: '',
        phoneNumber: '',
        idCard :"",
        sex:"0",
        email:'',
        birthday: "",
        remark: '' ,//备注,
        tMemberInfo:{
          maritalStatus:'',
          job:"",
          educationDegree:"",
          nativePlace:"",
        },
        tMemberDynamicinfo:{
          height:"",
          weight:"",
          sbp:"",
          dbp:"",
          breth:"",
          hipline:"",
          waistline:"",
          thermometer:""
        },
        tMemberMedicalhistory:{
          previousHistory:"",
          familyHistory:"",
          allergicHistory:"",
          medicalHistory:"",
          chronicDisease:""
        }
      },
      dialogProps: {
        visible: false,
        action: '',
        title: ''
      },
       options: [{
          value: 0,
          label: '未婚'
        }, {
          value: 1,
          label: '已婚'
        }],
    }
  },
  methods: {

    async update(){
        try {
        console.log(this.members)
      if(this.dialogProps.title=="添加用户"){
        if(this.members.idCard.length==18 && this.members.name.length>0
        && this.members.password.length>=6 &&this.members.sex.length>0
        && this.members.email.length>0 && this.members.age.length>0){
             let [flag] = await Promise.all([
            addMember(this.members)
          ])
             this.dialogProps.visible = false
        }else{
            this.members.name.length?"":alert("请填写姓名");
            this.members.idCard.length==18?"":alert("请填写完整的身份证");
            this.members.password.length>=6?"":alert("请填写正确的密码！不少于六位数");
            this.members.sex.length>0?"":alert("请完整性别");
            this.members.email.length>0?"":alert("请填写邮箱");
            this.members.age.length>0?"":alert("请填写年龄");
        }


      }else{
            let [flag] = await Promise.all([
            updatemember(this.members)
            ])
            this.dialogProps.visible = false
      }
      }catch(error){
        console.error();
      }
    },


      handleDialogClose() {
      this.dialogProps.visible = false
    },

    // handleDialogOpen() {
    //   this.$nextTick(() => {

    //   })
    // }
  },

  mounted: function() {
    this.$nextTick(() => {
      this.$on('openeditmemberdialog', function(member) {
        this.members = member

        this.dialogProps.action = 'edit'
        this.dialogProps.title = '修改用户'
        this.dialogProps.visible = true
      })
      this.$on('openAddUserDialog', function() {
        this.members = {
       id:0,
        fileNumber: '',
        name: '',
        regTime:"",
        password: '',
        birthday: '',
        phoneNumber: '',
        idCard :"",
        sex:0,
        email:'',
        birthday: "",
        remark: '' ,//备注,
        tMemberInfo:{
          maritalStatus:'',
          job:"",
          educationDegree:"",
          nativePlace:"",
        },
        tMemberDynamicinfo:{
          height:"",
          weight:"",
          sbp:"",
          dbp:"",
          breth:"",
          hipline:"",
          waistline:"",
          thermometer:""
        },
        tMemberMedicalhistory:{
          previousHistory:"",
          familyHistory:"",
          allergicHistory:"",
          medicalHistory:"",
          chronicDisease:""
        }
        }
        this.dialogProps.action = 'add'
        this.dialogProps.title = '添加用户'
        this.dialogProps.visible = true
      })
    })
  },


  }
</script>

